<template>
  <div class="app-container" style="background: #E6EBE9;">
    <div class="home-top">
      <div class="home-top-item home-top-one">
        <span class="home-tit-one">发布量</span>
        <div class="home-tit-two">13
          <span class="home-tit-three">篇</span>
        </div>
      </div>
      <div class="home-top-item home-top-two">
        <span class="home-tit-one">浏览量</span>
        <div class="home-tit-two">23
          <span class="home-tit-three">篇</span>
        </div>
      </div>
      <div class="home-top-item home-top-three">
        <span class="home-tit-one">收藏量</span>
        <div class="home-tit-two">10
          <span class="home-tit-three">篇</span>
        </div>
      </div>
      <div class="home-top-item home-top-four">
        <span class="home-tit-one">下载量</span>
        <div class="home-tit-two">5
          <span class="home-tit-three">篇</span>
        </div>
      </div>
    </div>
    <div class="home-center">
      <el-card shadow="never" class="home-center-left">
        <div class="home-center-tit">
          <img src="/static/homeImg/shenhe.png" alt="">
          <div class="img-tit">我的待审核</div>
        </div>
        <div class="center-left">
          <div class="center-left-item" v-for="i in 4" :key="i">
            <div class="left-item">
              <img class="left-item-img" src="/static/homeImg/naozhong.png" alt="">
              <div class="left-item-time">2023-10-20</div>
            </div>
            <div class="right-item">
              <div class="right-item-top">家长理性对待小众文化青少年心理诉求当受重视</div>
              <div class="right-item-bottom">单位名称：单位名称单位名称单位名称</div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="home-center-right">
        <div class="home-center-tit">
          <img src="/static/homeImg/xiazai.png" alt="">
          <div class="img-tit">我的下载</div>
        </div>
        <div class="center-right">
          <div class="center-right-item" v-for="i in 4" :key="i">
            <div class="icon"></div>
            <div class="tit-name">家长理性对待小众文化青少年心理诉求当受重视家长理性对待小众文化青少年</div>
          </div>
        </div>
      </el-card>
    </div>
    <el-card shadow="never" class="home-bottom">
      <div class="echarts-top">
        <img class="echarts-top-img" src="/static/homeImg/tongji.png" alt="">
        <div class="echarts-top-tit">文章发布数统计</div>
        <el-radio-group class="echarts-top-radio" v-model="radio" size="mini" fill="#27A280">
          <el-radio-button label="机构发布统计"></el-radio-button>
          <el-radio-button label="专家发布统计"></el-radio-button>
          <el-radio-button label="运营发布统计"></el-radio-button>
        </el-radio-group>
        <div class="echarts-top-btn">
          <el-button round size="mini" :class="{ btnSelet: btnName === '昨日' }" @click="seletDate('昨日')">昨日</el-button>
          <el-button round size="mini" :class="{ btnSelet: btnName === '仅七天' }" @click="seletDate('仅七天')">仅七天</el-button>
          <el-button round size="mini" :class="{ btnSelet: btnName === '近一个月' }"
            @click="seletDate('近一个月')">近一个月</el-button>
          <el-button round size="mini" :class="{ btnSelet: btnName === '近半年' }" @click="seletDate('近半年')">近半年</el-button>
          <el-button round size="mini" :class="{ btnSelet: btnName === '近一年' }" @click="seletDate('近一年')">近一年</el-button>
        </div>
        <el-date-picker class="echarts-top-time" size="mini" v-model="time" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div style="display: flex;width: 1580px;">
        <div id="home-echarts"></div>
        <div class="ranking">
          <div class="ranking-tit">文章发布数TOP10</div>
          <div style="width: 100%;display: flex;flex-wrap: wrap;">
            <div class="ranking-item" v-for="(item, i) in ranking" :key="i">
              <div class="icon"></div>
              <div class="ranking-num">TOP{{ i+1 }}</div>
              <div class="ranking-name">机构名称机构名称</div>
              <div class="num">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {

  data () {
    return {
      radio: '机构发布统计',
      time: [],
      btnName: '近一年',
      today: '',
      yesterday: '',
      sevenDaysAgo: '',
      oneMonthAgo: '',
      sixMonthsAgo: '',
      oneYearAgo: '',
      echart: null,
      ranking: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
    };
  },

  mounted () {
    this.getTime()
    this.time = [this.oneYearAgo, this.today]
    this.initChart()
  },

  methods: {
    getTime () {
      // 获取今日日期
      this.today = this.moment().format('YYYY-MM-DD');
      // 获取一年前的日期
      this.oneYearAgo = this.moment().subtract(1, 'year').format('YYYY-MM-DD');
      // 获取半年前的日期
      this.sixMonthsAgo = this.moment().subtract(6, 'months').format('YYYY-MM-DD');
      // 获取一个月前的日期
      this.oneMonthAgo = this.moment().subtract(1, 'month').format('YYYY-MM-DD');
      // 获取七天前的日期
      this.sevenDaysAgo = this.moment().subtract(7, 'days').format('YYYY-MM-DD');
      // 获取昨日日期
      this.yesterday = this.moment().subtract(1, 'days').format('YYYY-MM-DD');

    },
    seletDate (data) {
      this.btnName = data
      if (data === '近一年') {
        this.time = [this.oneYearAgo, this.today]
      } else if (data === '昨日') {
        this.time = [this.yesterday, this.today]
      } else if (data === '仅七天') {
        this.time = [this.sevenDaysAgo, this.today]
      } else if (data === '近一个月') {
        this.time = [this.oneMonthAgo, this.today]
      } else if (data === '近半年') {
        this.time = [this.sixMonthsAgo, this.today]
      }
    },
    initChart () {
      this.echart = echarts.init(document.getElementById('home-echarts'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          name: '文章数/篇'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#37DBAD'
              }, {
                offset: 1,
                color: '#73E3FA'
              }]),
              borderRadius: 10
            },
            // 设置条柱宽度
            barWidth: 20,
            type: 'bar'
          }
        ]
      }
      this.echart.setOption(option)
    },
  },
};
</script>
<style lang="scss" scoped>
.home-top {
  width: 1600px;
  display: flex;
  justify-content: space-around;
  margin: 20px 0;

  .home-top-item {
    position: relative;
    width: 360px;
    height: 130px;

    .home-tit-one {
      position: absolute;
      top: 50px;
      left: 50px;
      font-size: 24px;
      color: #fff;
    }

    .home-tit-two {
      position: absolute;
      top: 40px;
      left: 140px;
      font-size: 48px;
      color: #fff;

      .home-tit-three {
        font-size: 20px;
        color: #fff;
      }
    }


  }

  .home-top-one {
    background: url('/static/homeImg/one.png');
    background-size: 100% 100%;
  }

  .home-top-two {
    background: url('/static/homeImg/two.png');
    background-size: 100% 100%;
  }

  .home-top-three {
    background: url('/static/homeImg/three.png');
    background-size: 100% 100%;
  }

  .home-top-four {
    background: url('/static/homeImg/four.png');
    background-size: 100% 100%;
  }
}

.home-center {
  width: 1600px;
  display: flex;
  gap: 10px;

  .home-center-left {
    width: 960px;
    height: 300px;
  }

  .home-center-right {
    width: 630px;
    height: 300px;
  }
}

.home-center-tit {
  position: relative;
  display: flex;

  .img-tit {
    position: absolute;
    left: 30px;
    font-size: 18px;
  }
}

.center-left {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  width: 920px;
  gap: 20px;

  .center-left-item {
    display: flex;
    gap: 10px;
    width: 445px;
    height: 70px;
    border: 1px solid #E0FFF5;
    border-radius: 5px;

    .left-item {
      width: 70px;
      height: 70px;
      background: #F4FAF8;

      .left-item-img {
        margin: 14px 0 4px 23px;
      }

      .left-item-time {
        text-align: center;
        font-size: 10px;
        color: #27A280;
      }
    }

    .right-item {
      .right-item-top {
        width: 360px;
        font-size: 14px;
        color: #4C4C4C;
        line-height: 40px;
        white-space: nowrap;
        /* 将文本限制在一行内 */
        overflow: hidden;
        /* 超出容器宽度的文本进行裁剪 */
        text-overflow: ellipsis;
        /* 设置省略号样式 */
      }

      .right-item-bottom {
        width: 360px;
        font-size: 12px;
        color: #707070;
        white-space: nowrap;
        /* 将文本限制在一行内 */
        overflow: hidden;
        /* 超出容器宽度的文本进行裁剪 */
        text-overflow: ellipsis;
        /* 设置省略号样式 */
      }
    }
  }
}

.center-right {
  margin-top: 60px;

  .center-right-item {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;

    .icon {
      margin-top: 3px;
      width: 10px;
      height: 10px;
      background: linear-gradient(136deg, #D9AFD9 0%, #93FACC 100%);
      border-radius: 5px;
    }

    .tit-name {
      width: 550px;
      font-size: 14px;
      color: #4C4C4C;
      white-space: nowrap;
      /* 将文本限制在一行内 */
      overflow: hidden;
      /* 超出容器宽度的文本进行裁剪 */
      text-overflow: ellipsis;
      /* 设置省略号样式 */

    }
  }
}

.home-bottom {
  width: 1600px;
  margin: 10px 0;

  .echarts-top {
    position: relative;
    height: 40px;
    display: flex;

    .echarts-top-img {
      position: absolute;
      top: 10px;
      left: 0;
    }

    .echarts-top-tit {
      position: absolute;
      top: 12px;
      left: 24px;
      color: #4C4C4C;
      margin-left: 10px;
    }

    .echarts-top-radio {
      position: absolute;
      top: 6px;
      left: 190px;
    }

    .echarts-top-btn {
      position: absolute;
      top: 6px;
      left: 560px;
      display: flex;
      gap: 16px;

      .btnSelet {
        background: #27A280;
        color: #fff;
      }
    }

    .echarts-top-time {
      position: absolute;
      top: 6px;
      left: 1060px;
    }
  }
}

#home-echarts {
  width: 880px;
  height: 400px;
}

.ranking {
  width: 704px;

  .ranking-tit {
    text-align: center;
    line-height: 60px;
    color: #4C4C4C;
    font-size: 16px;
  }
}

.ranking-item {
  display: flex;
  width: 350px;
  font-size: 14px;
  line-height: 32px;
  margin-bottom: 20px;
  .icon {
    height: 10px;
    width: 10px;
    margin: 11px 0 0 40px;
    background: #777;
    border-radius: 5px;
  }

  .ranking-num {
    width: 30px;
    margin-left: 16px;
    color: #666;
  }

  .ranking-name {
    margin-left: 36px;
    color: #4C4C4C;
  }

  .num {
    margin-left: 36px;
    height: 32px;
    width: 32px;
    background: rgba(39, 162, 128, 0.1);
    line-height: 32px;
    color: #27A280;
    text-align: center;
    border-radius: 16px;
  }
}
</style>
